<template>
  <div>
    <div class="topgoods">
      <el-input placeholder="输入领取用户手机号搜索"
        v-model="phone"
        clearable
        size='small'
        style="float:right;width:200px;">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchRedpacket"></i>
      </el-input>
      <span>红包类型</span>
      <el-select v-model="type" placeholder="请选择红包类型"
            style="width:150px;margin:0 20px;"
            size='mini'>
          <el-option label="全部" :value='0'></el-option>
          <el-option label="普通红包" :value='1'></el-option>
          <el-option label="指定用户红包" :value='2'></el-option>
      </el-select>

      <span>领取状态</span>
      <el-select v-model="status" placeholder="请选择红包类型"
            style="width:150px;margin:0 20px;"
            size='mini'>
          <el-option label="全部" :value='0'></el-option>
          <el-option label="已发放" :value='1'></el-option>
          <el-option label="已领取" :value='2'></el-option>
          <el-option label="已失效" :value='3'></el-option>
      </el-select>
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column prop="created_at"
        label="发送时间"
        width="160"></el-table-column>
      <el-table-column prop="money_total"
        label="红包面额"></el-table-column>
     

      <el-table-column label='红包类型'
        width='120'>
        <template slot-scope="scope">
          <p v-if="scope.row.type == 0">普通用户红包</p>
          <p v-else>指定用户红包</p>
        </template>
      </el-table-column>

      <el-table-column label="领取范围">
        <template slot-scope="scope">
          <p v-if="scope.row.limit_type == 0">无</p>
          <p v-if="scope.row.limit_type == 1">仅会员</p>
          <p v-if="scope.row.limit_type == 2">仅粉丝</p>
          <p v-if="scope.row.limit_type == 3">仅指定用户</p>
        </template>
      </el-table-column>
      <el-table-column label="红包数量" prop="num_total"></el-table-column>
      <el-table-column prop='account' label='状态'>
           <template slot-scope="scope">
          <p v-if="scope.row.status == 1">已发放</p>
          <p v-if="scope.row.status == 2">已领取</p>
          <p v-if="scope.row.status == 3">已失效</p>
        </template>
      </el-table-column>
      <el-table-column label="已领取数量">
        <template slot-scope="scope">
          <p>{{Number(scope.row.num_total)-Number(scope.row.num)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
         <template slot-scope="scope">
           <p class="red_get_Detail" @click="getRedPacketDetail(scope.row.id)">领取详情</p>
         </template>
      </el-table-column>
      <!-- <el-table-column prop="phone"
        label="领取用户"
        width="240"></el-table-column>
        <el-table-column prop="invalid_time"
        label="领取时间"
        width="240"></el-table-column> -->
    </el-table>
<!-- 
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">
        
        <el-pagination background
          @current-change="pageChange"
          @size-change="handleSizeChange"
          :page-sizes="[15, 30, 50, 100]"
          :current-page="page"
          :page-size="size"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <jdialog title="红包充值记录" :visible.sync='isShowPacketRecord'>
       <el-table :data="receiveData" style="width:640px;padding:25px;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="用户昵称" prop="username"></el-table-column>
      <el-table-column label="领红包金额">
        <template slot-scope="scope">
          ¥{{scope.row.receive_money}}
        </template>
      </el-table-column>
      <el-table-column label="领取时间" prop="created_at"></el-table-column>
       </el-table>

        <el-pagination background
        class="pagination"
          @current-change="receivepageChange"
          :current-page="receivePage"
          :page-size="receiveSize"
          layout="total, prev, pager, next, jumper"
          :total="receiveTotal"></el-pagination>
    </jdialog>
  </div>
</template>

<script>
import {shopRedPacketSend,shopRedPacketReceiveUser} from '@/api/shopdetail'
export default {
  props:['shopId'],
  data () {
    return {
  
     status:'',
     type:'',
     phone:'',
      page:1,
      size:20,
      total:0,
      tableData: [],
      isShowPacketRecord:false,
      
      receivePage:1,
      receiveSize:20,
      receiveData:[],
      receiveTotal:0,
      currentId:'',
    }
  },
   mounted (){
     this.getRedPacketRecord(this.shopId)
  }, 
  watch: {
      shopId(newValue){
        if(newValue){
          this.getRedPacketRecord(this.shopId)
        }
      }
  },
  methods: {
    async getRedPacketRecord(shopId){
        if(this.status == ''){
            this.status = 0
        }
        if(this.type == ''){
            this.type = 0
        }
      var url = "page="+this.page+
                "&size="+this.size+
                "&status="+this.status+
                "&type="+this.type+
                '&phone='+this.phone
      let res = await shopRedPacketSend(shopId,url)
      this.tableData = res.data.data
      this.total = res.data.total
    },
    getRedPacketDetail(id){
      this.currentId = id
        this.getshopRedPacketReceiveUserData(id)
    },
    receivepageChange(page){
      this.receivePage = page
      this.getshopRedPacketReceiveUserData(this.currentId)
    },
    async getshopRedPacketReceiveUserData(id){
      var url  = 'page='+this.receivePage+
                 '&size='+this.receiveSize+
                 '&id='+id
      let res = await shopRedPacketReceiveUser(url)
      if(res.code === 10000){
         this.isShowPacketRecord = true
         this.receiveData = res.data.data
         this.receiveTotal  = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    searchRedpacket () {
      this.page = 1
      this.getRedPacketRecord(this.shopId)
    },
      pageChange(page) {
      this.page = page;
       this.getRedPacketRecord(this.shopId)
    },
    handleSizeChange(val) {
      this.size = val;
      this.pageChange(1);
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;
  .goodnum {
    float: left;
    width: 400px;
  }
  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}
.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}
.doing {
  color: blue;
}

.success {
  color: green;
}
.failure {
  color: red;
}
.operate_info {
  float: left;
}
.status—desc {
  float: right;
}
.pagination {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}

.red_get_Detail{
  color: #f4222d;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

</style>